<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="icon" href="./images/favicon.ico">
    <title>锤子商城 - 坚果手机、坚果 R2 手机、Smartisan TNT go 扩展本</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/shop.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/shop.js"></script>
</head>
<body>
    <div class="ctn">
        <!-- 导航条 -->
        <nav class="navbar-inverse">
            <!-- 锤子logo -->
            <div class="logo"><img src="./images/logo.png" alt=""></div>
            <!-- 导航选项 -->
            <div class="navbar-container">
                <ul class="navbar-words">
                    <li><a href="shop.html">在线商城</a></li>
                    <li><a href="./r2.html">坚果R2</a></li>
                    <li><a href="./smartisan.html">Smartisan TNT go</a></li>
                    <li><a href="./gongzuozhan.html">坚果TNT工作站</a></li>
                    <li><a href="javascript:void(0);">Smartisan OS</a></li>
                    <li><a href="javascript:void(0);">欢喜云</a></li>
                    <li><a href="javascript:void(0);">论坛</a> </li>
                    <li><a href="javascript:void(0);">开发者支持</a></li>
                    <li><a href="javascript:void(0);">荣誉与奖项</a></li>
                </ul>
            </div>
            <!-- 登录，购物车 -->
            <div class="login"><a href="./login.html"></a></div>
            <div class="shopcart">
                <a href="./fuqian.html">
                    <div class="shopcart-empty">
                        <div>
                            <img src="./images/shopcart.png" alt="">
                            <p>购物车为空</p>
                            <p>您还没有选购任何商品，现在前往商城选购吧！</p>
                        </div>
                    </div>
                </a>
            </div>
        </nav>
        <!-- title,搜索框 -->
        <div class="main-title">
            <div class="title-container">
                <ul class="title-item">
                    <li class="pull-down">
                        <a href="./shop.html">首页</a>
                        <!-- 下拉选项框 -->
                        <div>
                            <div id="pull-downcontainer">
                                <ul>
                                    <li>手机</li>
                                    <li><img src="./images/shouji01.webp" alt=""><span>手机</span></li>
                                </ul>
                                <ul>
                                    <li>官方配件</li>
                                    <li><img src="./images/shouji02.webp" alt=""><span>蓝牙耳机</span></li>
                                    <li><img src="./images/shouji03.webp" alt=""><span>数据线</span></li>
                                    <li><img src="./images/shouji04.webp" alt=""><span>充电器</span></li>
                                    <li><img src="./images/shouji05.webp" alt=""><span>移动电源</span></li>
                                    <li><img src="./images/shouji06.webp" alt=""><span>拍照配件</span></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="pull-down">
                        <a href="./categoryr2.html">坚果手机</a>
                        <!-- 下拉选项框 -->
                        <div></div>
                    </li>
                    <li class="pull-down">
                        <a href="./categoryr3.html">TNT</a>
                        <!-- 下拉选项框 -->
                        <div></div>
                    </li>
                    <li class="pull-down">
                        <a href="./categoryr4.html">官方自营</a>
                        <!-- 下拉选项框 -->
                        <div></div>
                    </li>
                    <li class="pull-down" id="last-one">
                        <a href="javascript:void(0);">服务</a>
                        <!-- 下拉选项框 -->
                        <div>
                            <ul class="pull-service">
                                <li><img src="./images/fuwu01.png" alt=""><span>保修服务</span></li>
                                <li><img src="./images/fuwu02.png" alt=""><span>在线客服</span></li>
                                <li><img src="./images/fuwu03.png" alt=""><span>服务政策</span></li>
                                <li><a href="./tijiaoshouhou.html"><img src="./images/fuwu04.png" alt=""></a><span>发起售后</span></li>
                                <li><img src="./images/fuwu05.png" alt=""><span>维修门店</span></li>
                                <li><img src="./images/fuwu06.png" alt=""><span>自助服务</span></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <!-- 搜索框 -->
                <div class="search-input">
                    <div><img src="./images/magnifier.png" alt=""></div>
                    <input type="text">
                    <a href="./gouwuche.html" class="R2">坚果 R2</a>
                    <a href="./gouwuche2.html" class="TNT">TNT</a>
                </div>
                <div class='searchactive'>
                    <a href="./login.html"><img src="./images/login01.png"></a>
                    <a href="" class="a-active">
                        <img src="./images/shopcart01.png">
                        <div class="active-empty">
                            <div>
                                <img src="./images/shopcart.png" alt="">
                                <p>购物车为空</p>
                                <p>您还没有选购任何商品，现在前往商城选购吧！</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div id="display">
            <ul>
                <li><a href="">坚果 R2</a></li>
                <li><a href="">蓝牙耳机</a></li>
                <li><a href="">TNT</a></li>
                <li><a href="">移动电源</a></li>
                <li><a href="">坚果快充</a></li>
                <li><a href="">坚果 R2保护套</a></li>
            </ul>
        </div>
        
        <!-- banner图 -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./images/fa808c10081b9fd3040bb7bfd12b891c.webp" alt="..." class="center-block">
                </div>
                <div class="item">
                    <img src="./images/fa808c10081b9fd3040bb7bfd12b891c.webp" alt="..." class="center-block">
                </div>
                <div class="item">
                    <img src="./images/fa808c10081b9fd3040bb7bfd12b891c.webp" alt="..." class="center-block">
                </div>
            </div>
            <!-- Controls -->
            <!-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a> -->
        </div>
        <!-- 小窗口广告展示 -->
        <div class="advertisement">
            <div>
                <a href="./shop.html"><img src="./images/a01.webp" alt=""></a>
                <a href="./shop.html"><img src="./images/a02.webp" alt=""></a>
                <a href="./shop.html"><img src="./images/a03.webp" alt=""></a>
                <a href="./shop.html"><img src="./images/a04.webp" alt=""></a>
            </div>
        </div>
        <!-- 热门商品 -->
        <div class="hot-product">
            <div class="hot-title">
                <h5>热门商品</h5>
                <div><img src="./images/下载.png" alt=""></div>
                <div><img src="./images/下载.png" alt="" class="right-arrow"></div>
            </div>
            <div class="pro-pic">
                <div>
                    <div><a href="./r2shouji.html" target="_blank"><img src="./images/hot01.webp" alt=""></a></div>
                    <h3>坚果R2</h3>
                    <h5>是下一代手机，更是下一代电脑</h5>
                    <span>￥2,699.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche.html" target="_blank"><img src="./images/hot02.webp" alt=""></a></div>
                    <h3>Smartisan TNT 大满足套装</h3>
                    <h5>是下一代手机，更是下一代电脑</h5>
                    <span>￥4,999.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche.html" target="_blank"><img src="./images/hot03.webp" alt=""></a></div>
                    <h3>Smartisan 真无线蓝牙耳机（抖音文创限量款）</h3>
                    <h5>抖音文创限量版</h5>
                    <span>￥299.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche.html" target="_blank"><img src="./images/hot04.webp" alt=""></a></div>
                    <h3>Smartisan 真无线TWS蓝牙耳机</h3>
                    <h5>智能配对 开盖即连</h5>
                    <span>￥99.00</span>
                </div>
            </div>
        </div>
        <!-- 坚果R2及配件 -->
        <div class="hot-product">
            <div class="hot-title">
                <h5>坚果R2及配件</h5>
            </div>
            <div class="accessory">
                <a href="./r2peijian.html"><img src="./images/peijian.webp" alt="" class="accessory-pic"></a>
                <div>
                    <div><a href="./r2shouji.html" target="_blank"><img src="./images/peijian01.webp" alt=""></a></div>
                    <h3>坚果R2</h3>
                    <h5>是下一代手机，更是下一代电脑</h5>
                    <span>￥2,699.00</span>
                </div>
                <div>
                    <div><a href="./r2shouji.html" target="_blank"><img src="./images/hot01.webp" alt=""></a></div>
                    <h3>坚果R2</h3>
                    <h5>是下一代手机，更是下一代电脑</h5>
                    <span>￥2,699.00</span>
                </div>
                <div>
                    <div><a href="./r2shouji.html" target="_blank"><img src="./images/peijian02.webp" alt=""></a></div>
                    <h3>坚果R2</h3>
                    <h5>是下一代手机，更是下一代电脑</h5>
                    <span>￥4,699.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/peijian03.webp" alt=""></a></div>
                    <h3>坚果 R2 足迹系列保护套</h3>
                    <h5>7种主题随机发货</h5>
                    <span>￥59.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/peijian04.webp" alt=""></a></div>
                    <h3>坚果 R2 足迹系列保护套 3M 开始销售透明胶带</h3>
                    <h5>为了那些改变人类足迹的进程</h5>
                    <span>￥59.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/peijian05.webp" alt=""></a></div>
                    <h3>坚果 R2 足迹系列保护套 圆珠笔的改进者出生</h3>
                    <h5>为了那些改变人类足迹的进程</h5>
                    <span>￥59.00</span>
                </div>
            </div>
        </div>
        <!-- Smartisan TNT -->
        <div class="hot-product">
            <div class="hot-title">
                <h5>Smartisan TNT</h5>
            </div>
            <div class="accessory">
                <a href="./categoryr4.html"><img src="./images/Smartisan01.webp" alt="" class="accessory-pic"></a>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan02.webp" alt=""></a></div>
                    <h3>Smartisan TNT 大满足套装</h3>
                    <h5>下一代手机，下一代电脑</h5>
                    <span>￥4,999.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan03.webp" alt=""></a></div>
                    <h3>Smartisan TNT 大满足套装</h3>
                    <h5>下一代手机，下一代电脑</h5>
                    <span>￥5,699.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan04.webp" alt=""></a></div>
                    <h3>Smartisan TNT go</h3>
                    <h5> 欢迎使用下一代电脑</h5>
                    <span>￥1,499.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan05.webp" alt=""></a></div>
                    <h3>Smartisan TNT go</h3>
                    <h5> 欢迎使用下一代电脑</h5>
                    <span>￥1,999.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan06.webp" alt=""></a></div>
                    <h3>Smartisan 智能手写笔</h3>
                    <h5>尽情挥洒创造力</h5>
                    <span>￥499.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan07.webp" alt=""></a></div>
                    <h3>Smartisan 手机立式扩展坞</h3>
                    <h5>连屏幕，连外设，手机拓展一步到位</h5>
                    <span>￥299.00</span>
                </div>
            </div>
        </div>
        <!-- 官方精选配件 -->
        <div class="hot-product">
            <div class="hot-title">
                <h5>官方精选配件</h5>
                <div>
                    <a href="#">官方精选配件</a>
                    <a href="#">更多推荐</a>
                </div>
            </div>
            <div class="accessory">
                <a href="./categoryr4.html"><img src="./images/guanfang01.webp" alt="" class="accessory-pic"></a>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang02.webp" alt=""></a></div>
                    <h3>Smartisan 真无线蓝牙耳机（抖音文创限量款）</h3>
                    <h5> 抖音文创限量版</h5>
                    <span>￥299.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang03.webp" alt=""></a></div>
                    <h3>Smartisan 手机支架</h3>
                    <h5>立得住，放的稳</h5>
                    <span>￥39.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang04.webp" alt=""></a></div>
                    <h3>坚果彩虹数据线</h3>
                    <h5>七彩配色随机发货，为生活增添一份小小惊喜</h5>
                    <span>￥19.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang05.webp" alt=""></a></div>
                    <h3>Smartisan 颈挂蓝牙耳机</h3>
                    <h5>“圈铁一体代表作”</h5>
                    <span>￥199.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang06.webp" alt=""></a></div>
                    <h3>Smartisan 多功能数据线(USB 3.2 Gen 2)</h3>
                    <h5>高清投屏，高速传输</h5>
                    <span>￥79.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang07.webp" alt=""></a></div>
                    <h3>Smartisan 真无线蓝牙耳机 Pro</h3>
                    <h5>通话降噪 全新升级</h5>
                    <span>￥129.00</span>
                </div>
            </div>
        </div>
        <!-- 足迹系列保护套 -->
        <div class="hot-product">
            <div class="hot-title">
                <h5>足迹系列保护套</h5>
            </div>
            <div class="accessory">
                <a href="./categoryr4.html"><img src="./images/zuji01.webp" alt="" class="accessory-pic"></a>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji02.webp" alt=""></a></div>
                    <h3>Smartisan 真无线蓝牙耳机（抖音文创限量款）</h3>
                    <h5> 抖音文创限量版</h5>
                    <span>￥299.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji03.webp" alt=""></a></div>
                    <h3>Smartisan 手机支架</h3>
                    <h5>立得住，放的稳</h5>
                    <span>￥39.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji04.webp" alt=""></a></div>
                    <h3>坚果彩虹数据线</h3>
                    <h5>七彩配色随机发货，为生活增添一份小小惊喜</h5>
                    <span>￥19.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji05.webp" alt=""></a></div>
                    <h3>Smartisan 颈挂蓝牙耳机</h3>
                    <h5>“圈铁一体代表作”</h5>
                    <span>￥199.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji06.webp" alt=""></a></div>
                    <h3>Smartisan 多功能数据线(USB 3.2 Gen 2)</h3>
                    <h5>高清投屏，高速传输</h5>
                    <span>￥79.00</span>
                </div>
                <div>
                    <div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji07.webp" alt=""></a></div>
                    <h3>Smartisan 真无线蓝牙耳机 Pro</h3>
                    <h5>通话降噪 全新升级</h5>
                    <span>￥129.00</span>
                </div>
            </div>
        </div>
        <!-- 论坛精选 -->
        <div class="forum">
            <div class="forum-title">
                <h5>论坛精选</h5>
                <div><button>前往论坛</button></div>
            </div>
            <div class="forum-pro">
                <div>
                    <a href="./categoryr4.html"><img src="./images/luntan01.webp" alt=""></a>
                    <h3>Smartisan OS v8.0.1 更新日志(坚果 R2)</h3>
                    <p>Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
                    <p class="read">阅读全文></p>
                </div>
                <div>
                    <img src="./images/luntan02.webp" alt="">
                    <h3>坚果 R2 购买及使用常见问题</h3>
                    <p>你关心的各种问题~</p>
                    <p class="read">阅读全文></p>
                </div>
                <div>
                    <img src="./images/luntan03.webp" alt="">
                    <h3>R2体验新鲜出炉,上手两小时体验(持续更新)</h3>
                    <p>新鲜出炉上手体验</p>
                    <p class="read">阅读全文></p>
                </div>
                <div>
                    <img src="./images/luntan04.webp" alt="">
                    <h3>Smartisan OS v8.0.1 更新日志(坚果 R2)</h3>
                    <p>Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
                    <p class="read">阅读全文></p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <div class="footer-menu">
                    <ul>
                        <li>
                            <h3>订单服务<h3>
                                    <div>
                                        <a href="">购买指南</a>
                                        <a href="">送货政策</a>
                                    </div>
                        </li>
                        <li>
                            <h3>服务支持<h3>
                                    <div>
                                        <a href="">自主服务</a>
                                        <a href="">维修门店</a>
                                    </div>
                        </li>
                        <li>
                            <h3>媒体中心<h3>
                                    <div>
                                        <a href="">新闻动态</a>
                                        <a href="">官方视频</a>
                                        <a href="">图片资源</a>
                                    </div>
                        </li>
                        <li>
                            <h3>关注我们<h3>
                                    <div>
                                        <a href="">新浪微博</a>
                                        <a href="">官方微信</a>
                                        <a href="">荣誉奖项</a>
                                    </div>
                        </li>
                    </ul>
                    <div class="footer-service">
                        <a href="#" class="iconfont icon-wenhaofill"></a>
                        <span>在线帮助</span>
                    </div>
                </div>
                <div class="footer-info">
                    <ul>
                        <li>Copyright © 2020 smartisan.com 版权所有</li>
                        <li><a href="">锤子商城隐私政策</a></li>
                        <li><a href="">锤子商城用户协议</a></li>
                        <li><a href="">资质证照</a></li>
                    </ul>
                    <ul>
                        <li><a href="">京 ICP 备 19048576 号 - 1</a></li>
                        <li><a href="">京公网安备 11010802033469号</a></li>
                        <li><a href="">京食药网食备 202010031</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    //获取导航条
    var guid = document.querySelectorAll(".pull-down");
    for (let i = 0; i < guid.length; i++) {
        guid[i].onmouseenter = function () {
            this.querySelector("div").style.display = "block";
        }
        guid[i].onmouseleave = function () {
            this.querySelector("div").style.display = "none";
        }
    }
    //获取导航条搜索框
    var navbar = document.querySelector(".search-input");
    var searchactive = document.querySelector(".searchactive")
    //获取滚动条位置
    function getScrollTop() {
        var scrollPos;
        if (window.pageYOffset) {
            scrollPos = window.pageYOffset;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            scrollPos = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollPos = document.body.scrollTop;
        }
        return scrollPos;
    }
    //滚动条滑下 导航条样式改变
    window.onscroll = function () {
        let scrollPos = getScrollTop();
        if (scrollPos > 45) {
            navbar.style.display="none"
            // navbar.innerHTML="";
            // navbar.style.border="none"
            // navbar.innerHTML="<div class='searchactive'><img src='./images/login01.png'></div>"+"<div class='searchactive'><img src='./images/shopcart01.png'></div>"
            searchactive.style.display="flex"
        }else{
            navbar.style.display="flex"
            searchactive.style.display="none"
        }
    }

    //获取购物车
    var shopcart = document.querySelector(".shopcart>a");
    var shopcartone = document.querySelector(".shopcart-empty>div")
    shopcart.onmouseenter=function(){
        shopcartone.style.display="block"
    }
    shopcart.onmouseleave=function(){
        shopcartone.style.display="none"
    }
    var active = document.querySelector(".a-active");
    var activediv = document.querySelector(".active-empty>div")
    active.onmouseenter=function(){
        activediv.style.display="block"
    }
    active.onmouseleave=function(){
        activediv.style.display="none"
    }
    // 获取搜索框
    var search = document.querySelectorAll(".search-input>a");
    var searchdiv = document.querySelector(".search-input");
    var searchinput=document.querySelector(".search-input>input");
    var searchul = document.querySelector("#display")
    searchinput.onfocus=function(){
        search[0].style.visibility="hidden"
        search[1].style.visibility="hidden"
        searchinput.placeholder="请输入搜索的商品"
        searchul.style.display="block"
    }
    searchinput.onblur=function(){
        search[0].style.visibility="visible"
        search[1].style.visibility="visible"
        searchinput.placeholder=""
        searchul.style.display="none"
    }

    $('.carousel').carousel({
      interval: 1500
     })
</script>